<script setup lang="ts">
import { onMounted } from 'vue'
import DatePicker from '@/components/common/DatePicker.vue'
import Select from '@/components/common/Select.vue'
import TextInput from '@/components/common/TextInput.vue'
import { useIndividualSettings } from '@/hooks/settings/useIndividualSettings'

const {
  personalInfo,
  invitationCode,
  passwordReset,
  isLoading,
  isCodeSent,
  canSendCode,
  sendCodeButtonText,
  stageTypeOptions,
  initializeForm,
  updatePersonalInfo,
  verifyInvitationCode,
  sendVerificationCode,
  resetUserPassword,
} = useIndividualSettings()

onMounted(() => {
  initializeForm()
})
</script>

<template>
  <div class="content-header">
    系统设置
  </div>

  <div id="individual" class="card-area">
    <h3>个人中心</h3>
    <h4>账号信息</h4>

    <div class="account-info-section">
      <div class="form-grid">
        <div class="form-row">
          <TextInput v-model="personalInfo.name" class="form-input" label="姓名" placeholder="请输入姓名" />
          <TextInput v-model="personalInfo.phone" class="form-input" label="手机号" placeholder="请输入手机号" />
        </div>
        <div class="form-row">
          <TextInput v-model="personalInfo.school" class="form-input" label="学校" placeholder="请输入学校名称" />
          <Select v-model="personalInfo.stageType" class="form-input" label="教学阶段" :options="stageTypeOptions" />
        </div>
        <div class="form-row">
          <Select
            v-model="personalInfo.gender" class="form-input" label="性别" :options="[
              { label: '请选择性别', value: '' },
              { label: '男', value: 'male' },
              { label: '女', value: 'female' },
            ]"
          />
          <DatePicker v-model="personalInfo.birthday" class="form-input" label="出生日期" />
        </div>
      </div>

      <div class="save-button-container">
        <button class="save-btn" :disabled="isLoading" @click="updatePersonalInfo">
          {{ isLoading ? '保存中...' : '保存信息' }}
        </button>
      </div>

      <h4>邀请码</h4>
      <div class="invitation-code-container">
        <TextInput v-model="invitationCode" class="invitation-code-input" label="邀请码" placeholder="输入邀请码加入班级" />
        <button class="verify-btn" :disabled="isLoading" @click="verifyInvitationCode">
          {{ isLoading ? '验证中...' : '验证' }}
        </button>
      </div>

      <h4>修改密码</h4>
      <div class="reset-password-container">
        <div class="area-wrapper">
          <TextInput v-model="passwordReset.phone" class="reset-password-input" label="手机号" placeholder="输入手机号" />
          <button class="send-code-btn" :disabled="!canSendCode" @click="sendVerificationCode">
            {{ sendCodeButtonText }}
          </button>
        </div>
        <div v-if="isCodeSent">
          <div class="area-wrapper">
            <TextInput
              v-model="passwordReset.verificationCode" class="reset-password-input" label="验证码"
              placeholder="输入验证码"
            />
          </div>
          <div class="area-wrapper">
            <TextInput
              v-model="passwordReset.newPassword" class="reset-password-input" label="新密码" placeholder="输入新密码"
              type="password"
            />
            <button class="reset-btn" :disabled="isLoading" @click="resetUserPassword">
              {{ isLoading ? '重置中...' : '重置密码' }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card-area {
  padding: 24px 32px 32px 32px;
  margin: 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333333;
  margin: 0;
  margin-bottom: 2rem;
}

h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333333;
  margin: 0;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  padding-left: 12px;
}

h4::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-300));
  border-radius: 2px;
}

.account-info-section {
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
}

.form-input {
  width: 100%;
}

.save-button-container {
  margin: 2rem 0 1rem 0;
  display: flex;
  justify-content: flex-start;

  .save-btn {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(36, 71, 249, 0.3);
    }

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
}

.invitation-code-container {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;

  .invitation-code-input {
    flex: 1;
    max-width: 300px;
  }

  .verify-btn {
    border-radius: 8px;
    transition: all 0.3s ease;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
    }

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
}

.reset-password-container {
  margin: 1.5rem 0;
  padding: 24px;
  border-radius: 12px;

  .area-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.5rem;
  }

  .reset-password-input {
    flex: 1;
    max-width: 280px;
  }

  .send-code-btn,
  .reset-btn {
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;

    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(36, 71, 249, 0.3);
    }

    &:disabled {
      background: #ccc;
      cursor: not-allowed;
      transform: none;
      box-shadow: none;
    }
  }
}
</style>
